<template>
  <div class="test-reports">
    <el-card>
      <template #header>
        <span>报表功能测试</span>
      </template>
      
      <el-button @click="testApi" type="primary" :loading="loading">
        测试报表API
      </el-button>
      
      <div v-if="result" style="margin-top: 20px;">
        <h3>API响应结果：</h3>
        <pre>{{ JSON.stringify(result, null, 2) }}</pre>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { getStoreReportsData } from '@/api/reports'

const loading = ref(false)
const result = ref(null)

const testApi = async () => {
  loading.value = true
  try {
    const response = await getStoreReportsData({
      timeType: 'month'
    })
    result.value = response
    ElMessage.success('API调用成功')
  } catch (error) {
    console.error('API调用失败:', error)
    ElMessage.error('API调用失败：' + error.message)
    result.value = { error: error.message }
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.test-reports {
  padding: 20px;
}

pre {
  background: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
}
</style> 